<template>
  <div class="flex">
    <!-- 左边表格 -->
    <LeftTable/>
    <div class="right ml-3" id="printDom">
      <!-- 患者基本信息 -->
      <PatientDetail style="padding: 10px;"/>
      <BodyReport class="mt-3">
        <div></div>
      </BodyReport>
      <Bottom class="mt-3"/>
      <svg aria-hidden="true" class="print w-6 h-6" @click="showPrintDialog">
        <use xlink:href="#icon-print"/>
      </svg>
    </div>

    <el-dialog v-model="printShow" title="选择打印报告" width="500px" :close-on-click-modal="false">
      <el-checkbox-group v-model="printCheckList">
        <el-checkbox label="heart">脉率</el-checkbox>
        <el-checkbox label="spo2">血氧</el-checkbox>
        <el-checkbox label="temp">体温</el-checkbox>
      </el-checkbox-group>
      <div class="dialog-footer">
        <el-button type="primary" @click="print">确 定</el-button>
        <el-button @click="printShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import LeftTable from './components/left-table.vue'
import PatientDetail from './components/patientDetail.vue'
import BodyReport from './components/BodyReport/index.vue'
import Bottom from './components/bottom.vue'
import {useRouter} from 'vue-router'
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import {usePatientStore} from "@/store/modules/patient";

const printCheckList = ref(['temp', 'spo2', 'heart'])
const router = useRouter()
const printShow = ref(false)
const usePatient = usePatientStore()

const ids: any = ref([])
const print = () => {
  if (printCheckList.value.length <= 0) {
    ElMessage.warning('请勾选报告')
  } else {
    let data = usePatient.currentPatient;
    ids.value = []
    ids.value.push(data.visitNoStr)
    localStorage.setItem("dy", JSON.stringify(printCheckList.value));
    localStorage.setItem("visitNos", JSON.stringify(ids.value));
    localStorage.setItem("isMerge", "false");
    router.push({
      name: 'PrintPage',
    })
  }
}

const showPrintDialog = () => {
  let data = usePatient.currentPatient;
  if ("1" === data.useStatus) {
    if (data.diagnosis) {
      printShow.value = true;
    } else {
      ElMessage.error('请先填写入院诊断后再打印报告！')
    }
  } else {
    ElMessage.error('该患者监测数据不足，无法打印报告！')
  }
}
</script>

<style scoped lang="less">
.right {
  min-width: 1100px;
  width: calc(100% - 418px);
  position: relative;
  background-color: var(--app-contnet-bg-color);

  .print {
    position: absolute;
    top: 22px;
    right: 22px;
  }
}
</style>
